<template>
  <div style="width: 100%; height: 100%">
    <div v-if="dataList.length > 6" class="arrowdiv">
      <px-button :color="`${dark ? '#fff' : ''}`" style="float: left" :icon="ArrowLeft" plain text :disabled="!canPrev" @click="handelPrev" />
      <px-button :color="`${dark ? '#fff' : ''}`" style="float: left" :icon="ArrowRight" plain text :disabled="!canNext" @click="handelNext" />
    </div>
    <px-carousel
      v-if="chartsList.length > 0"
      ref="carouselContainer"
      :loop="true"
      :autoplay="autoplay"
      arrow="never"
      style="height: 100%"
      :interval="5000"
      @change="handleCarouse"
    >
      <px-carousel-item v-for="(list, index) in chartsList" :key="index" class="carousel-con">
        <div v-for="(item, index1) in list" :key="index1" class="chart-item">
          <tempGauge
            style="width: 100%; height: 100%"
            :itemParam="item"
            :itemValue="item.value"
            :color="'#3B82F6'"
            :width="'100%'"
            :height="'90%'"
            :type="type"
          />
          <div class="btn-text">
            <ReTextTooltip v-if="item.code != '' && item.code" :content="`编号:${item.code}`" />
            <ReTextTooltip v-if="item.itemName != '' && item.itemName" :content="`名称:${item.itemName}`" />
          </div>
        </div>
        <template #arrow-left>
          <px-icon>
            <ArrowLeft />
          </px-icon>
        </template>
      </px-carousel-item>
    </px-carousel>
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs } from "vue";
import { reactive, onMounted, ref } from "vue";
import tempGauge from "./tempGauge.vue";
import { ArrowLeft, ArrowRight } from "@px-ui/icons-vue";
import ReTextTooltip from "@/components/ReTextTooltip";
import { querySpecValues } from "@/api/machineApi";
import { queryChildByTypeCodeAndItemValue } from "@/api/waterClass";

const carouselContainer: any = ref(Math.random().toString(36).slice(2, 10));

onMounted(() => {
  byEvents();
});
const props = defineProps({
  type: {
    type: String,
    default: ""
  },
  dark: {
    type: Boolean,
    default: false
  },
  autoplay: {
    type: Boolean,
    default: false
  }
});
const state = reactive({
  dataList: [],
  chartsList: []
});
const { dataList, chartsList } = toRefs(state);
const handelPrev = () => {
  carouselContainer.value.prev();
};
const handelNext = () => {
  carouselContainer.value.next();
};
const canPrev = ref(false);
const canNext = ref(true);
const handleCarouse = index => {
  canPrev.value = index > 0;
  canNext.value = index < chartsList.value.length - 1;
};

const sliceArrayInGroup = arr => {
  const result = [];
  for (let i = 0; i <= arr.length - 6; i++) {
    result.push(arr.slice(i, i + 6));
  }
  return result;
};

const byEvents = async () => {
  const response: any = await queryChildByTypeCodeAndItemValue({
    value: "MICROOMSZB",
    typeCode: "MCTS"
  });
  const tempList = response.filter(item => item.itemValue.includes("MICROOMSZB"));
  const spclist3 = tempList.map(item => JSON.parse(item?.itemDesc.replace(/[\r|\n|\t]/g, "")));
  const arr = [];
  spclist3.forEach(element => {
    arr.push(element.point_position);
  });
  // const pointList = arr.join(",");
  const res: any = await querySpecValues([...arr]);
  const resData =
    res.rows && res.rows.length
      ? res
      : {
          innerServiceErrorMsg: null,
          total: 0,
          pageSize: 0,
          currentPageNum: 0,
          totalPage: 0,
          rows: [],
          jsonRows: null
        };
  dataList.value = tempList.map(el => {
    return {
      key: resData.rows.find(i => i.point === JSON.parse(el?.itemDesc.replace(/[\r|\n|\t]/g, "")).point_position)?.point || "-",
      code: JSON.parse(el?.itemDesc.replace(/[\r|\n|\t]/g, "")).code ? JSON.parse(el?.itemDesc.replace(/[\r|\n|\t]/g, "")).code : "-",
      value: resData.rows.find(i => i.point === JSON.parse(el?.itemDesc.replace(/[\r|\n|\t]/g, "")).point_position)?.last_value || 0,
      ...el
    };
  });
  // let newDataList = [];
  // let current = 0;
  // if (dataList.value && dataList.value.length > 0) {
  //   for (let i = 0; i <= dataList.value.length - 1; i++) {
  //     if (i % 6 !== 0 || i === 0) {
  //       if (!newDataList[current]) {
  //         newDataList.push([dataList.value[i]]);
  //       } else {
  //         newDataList[current].push(dataList.value[i]);
  //       }
  //     } else {
  //       current++;
  //       newDataList.push([dataList.value[i]]);
  //     }
  //   }
  // }
  chartsList.value = [...sliceArrayInGroup(dataList.value)];
  if (chartsList.value.length > 1) {
    canNext.value = true;
  }
  // chartsList.value = tempList;
};
</script>
<style scoped lang="scss">
.carousel-con {
  display: inline-flex;
  justify-content: space-between;
}

.chart-item {
  display: flex;
  flex-flow: column nowrap;
  float: left;
  width: 16%;
  // min-width: 200px;
  height: 100%;

  .btn-text {
    display: flex;
    flex-flow: column nowrap;
    gap: 6px;
    // justify-content: center;
    width: 100%;
    // height: 24px;
    font-size: 12px;
    text-align: center;
  }
}

.arrowdiv {
  position: absolute;
  top: 10px;
  right: 0;
  z-index: 99999;
  width: 110px;
  height: 20px;

  i {
    cursor: pointer;
  }
}

:deep(.px-carousel__container) {
  height: 100%;
}

:deep(.px-carousel__indicators--horizontal) {
  bottom: -15px;
}
</style>
